<template>
	<view class="top">
		<view class="top-title">
			<!-- <view class="top-title-month">
				<i class="iconfont iconjiantou mirror"></i>
				<view class="top-title-month-name">2019年</view>
				<i class="iconfont iconjiantou"></i>
			</view> -->
			<view class="top-title-month">
				<i class="iconfont iconjiantou mirror" @click="month--"></i>
				<view class="top-title-month-name">{{ month }}月</view>
				<i class="iconfont iconjiantou" @click="month++"></i>
			</view>
			<view class="top-title-month"><view class="today" @click="today()">今</view></view>
		</view>
		<view class="top-week">
			<view class="top-week-title">
				<view>日</view>
				<view>一</view>
				<view>二</view>
				<view>三</view>
				<view>四</view>
				<view>五</view>
				<view>六</view>
			</view>
			<view class="top-week-day">
				<swiper :indicator-dots="false" :autoplay="false" style="height: 80rpx;width:100%;overflow-y: ;" :cancelable="true" :current="weeknum">
					<swiper-item class="swiper-item" v-for="(week, i) in weeks" :key="i" v-if="week[0].month - month != 1">
						<view v-for="(date, idx) in week" :key="idx" class="date-item">
							<view @click="changeDay(date.date, date.disable)" class="date" :class="{ active: chooseDay == date.date && date.month == month, 'disable-date': date.disable }">{{ date.date }}</view>
							<view class="bottom-dot-box">
								<span class="dot" v-if="dots && Object.values(dots).length && dots[date.date] && !date.disable" v-for="(dot, index) in dots[date.date]" :key="index"></span>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
import Calendar from './util.js';
export default {
	props: {
		// 数据格式
		// { 1:[], 21:[] ... }
		dots: Object // 免费班每一条数据
	},
	data() {
		return {
			month: 5,
			year: 2020,
			chooseDay: -1,
			chooseDuration: -1,
			calendar: null, // 日历
			weeks: null,
			weeknum: 0,
			temp_dots: {},
			currentWeek: [
				{ date: '日', day: 2 },
				{ date: '一', day: 3 },
				{ date: '二', day: 4 },
				{ date: '三', day: 5 },
				{ date: '四', day: 6 },
				{ date: '五', day: 7 },
				{ date: '六', day: 8 }
			]
		}
	},
	onNavigationBarButtonTap(e) {
		var _vm = this;
		// this.date = +new Date()
		// // #ifdef APP-PLUS  | MP
		// var webView = this.$mp.page.$getAppWebview();
		// webView.setTitleNViewButtonStyle(0, {
		// 	text: _vm.deleting ? '完成' : '编辑',
		// });
		// // #endif
	},
	created() {
		this.today();
	},
	watch: {
		// 选择日期触发 change
		chooseDay(val) {
			this.$emit('change', { year: this.year, month: this.month, date: val });
		},
		// 监听月变化，更新week表
		month(val) {
			if (val < 1) {
				(this.month = 12), this.year--;
				return;
			} else if (val > 12) {
				(this.month = 1), this.year++;
				return;
			}
			var _d = new Date();
			this.$emit('changeMonth', { year: this.year, month: this.month});
			if (_d.getMonth() == this.month - 1 && _d.getFullYear() == this.year) {
				this.setDay();
			} else {
				console.log(this.year, this.month);
				this.setDay(+new Date(this.year, this.month - 1));
			}
		}
	},
	methods: {
		navTo(url) {
			uni.navigateTo({ url: url });
		},
		add() {
			console.log('add item');
		},
		// 用于外部执行内部的点击事件
		renderDay(){
			this.$emit('change', { year: this.year, month: this.month, date: this.chooseDay });
			this.$forceUpdate()
		},
		// 点击日期
		changeDay(date, disable) {
			if(!disable){
				this.chooseDay = date;
			}
		},
		today() {
			var today = new Date();
			this.year = today.getFullYear();
			this.month = today.getMonth() + 1;
			this.changeDay(today.getDate())
			setTimeout(e=>this.$forceUpdate(), 10)
		},
		setDay(day) {
			var isDay = false;	// 担心月份中没有选择的那一天
			this.calendar = new Calendar({ date: day || +new Date() });
			this.weeks = this.calendar.weeks;
			if (!day) {
				for (var i = 0; i < 4; i++) {
					for (var j = 0; j < this.weeks[i].length; j++) {
						if (this.weeks[i][j]['isDay']) {
							this.chooseDay = this.weeks[i][j].date;
							this.weeknum = i;
							this.fullDate = this.weeks[i][j].fullDate;
							isDay = true
							this.$emit('getData', this.weeks[i][j]); //默认当天时间
							break;
						}
					}
				}
			}
			isDay ? this.$emit('change', { year: this.year, month: this.month, date: this.chooseDay }) : (this.chooseDay = 1)
			this.$forceUpdate()
		}
	}
};
</script>

<style>
.top-week-title,
.top-week-day {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.top-week-title view {
	width: 50upx;
	height: 50upx;
	text-align: center;
}

.swiper-item {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.date-item {
	width: 50upx;
	line-height: 1;
	text-align: center; /*  */
}
.date-item view.active {
	width: 50upx;
	height: 50upx;
	background: #ffffff;
	color: #fe9900;
	border-radius: 50%;
}
.date-item .disable-date {
	color: transparent;
	text-shadow: 0 0 4upx rgba(255, 255, 255, 0.9);
}

.iconfont {
	font-family: iconfont;
}
.mirror {
	transform: rotateY(180deg);
	transition: all none;
}

.top {
	width: 100%;
	height: 290upx;
	background: #fe9900;
	margin-top: -8upx;
}
.top .top-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	margin: 0 40upx;
}
.top .top-title .top-title-month {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.top .top-title .top-title-month i {
	font-size: 28upx;
}
.top .top-title .top-title-month .today {
	font-size: 28upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	line-height: 28upx;
	color: #fff;
	cursor: pointer;
	padding: 0 10upx;
}

.top .top-title .top-title-month .top-title-month-name {
	margin: 0 30upx;
	font-size: 34upx;
	font-family: Source Han Sans CN;
	font-weight: 500;
	color: #fff;
}
.top .top-title .top-title-today {
	font-size: 30upx;
}
.top .top-week {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	margin: 20upx 40upx;
	flex-direction: column;
}
.top .top-week .top-week-day {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.top .top-week .top-week-day view:first-child {
	font-size: 26upx;
	font-weight: 400;
	opacity: 0.8;
}
.top .top-week .top-week-day .date {
	width: 50upx;
	height: 50upx;
	text-align: center;
	line-height: 50upx;
}
.top .top-week .top-week-day .active {
	width: 50upx;
	height: 50upx;
	background: #ffffff;
	color: #fe9900;
	border-radius: 50%;
}
.bottom-dot-box {
	display: inline-flex;
	text-align: center;
	padding-top: 6upx;
	height: 8upx;
}
.bottom-dot-box .dot {
	width: 8upx;
	height: 8upx;
	position: relative;
	background: #fff;
	border-radius: 50%;
	margin-left: 6upx;
}
.bottom-dot-box .dot:first-child {
	margin-left: 0;
}
</style>
